<template>
    <div class="card-container">
    <el-breadcrumb
      class="breadcrumb-margin"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card full-card">
      <div slot="header" class="header-container">
        <el-row :gutter="30" class="card-row">
          <el-col :span="8">
            <el-input
              placeholder="请输入产品名称(空值默认查询所有产品)"
              v-model="selectName"
              clearable
              class="input-with-select"
              @keyup.enter.native="selectProduct({name:selectName,categoryId:selectCategory,status:null,page: 1,pageSize: 10})"
              @clear="selectProduct({name:null,categoryId:null,status:null,page: 1,pageSize: 10})"
            >
             <el-select  v-model="selectCategory" slot="prepend" placeholder="所有产品" @change="selectProduct({name:selectName,categoryId:selectCategory,status:null,page: 1,pageSize: 10})" style="width: 120px">
                <el-option label="所有分类" :value="null" > </el-option>
                <el-option v-for="item in categoryList" :key="item.id" :label="item.name"  :value="item.id" ></el-option>            
            </el-select>
              <template slot="append">
                <el-button
                  icon="el-icon-search"
                  @click="selectProduct({name:selectName,categoryId:selectCategory,status:null,page: 1,pageSize: 10})"
                ></el-button>
              </template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="success" @click="dialogAddVisible = true"
              >添加用户</el-button
            >
          </el-col>
          <el-col :span="4">
            <el-button type="danger" @click="deleteUsers(multipleSelection)"
              >批量删除用户</el-button
            >
          </el-col>
        </el-row>
      </div>

      <el-table
        :data="productList"
        border
        style="width: 100%"
        class="hospital-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type=index label="#" width="70"> </el-table-column>
        <el-table-column prop="categoryName" label="产品类别" width="70"> </el-table-column>
        <el-table-column prop="name" label="产品名称" width="120">
        </el-table-column>
        <el-table-column prop="price" label="产品价格" width="100">
        </el-table-column>
        <el-table-column prop="image" label="产品图片" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.image" class="avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="产品库存" width="150">
        </el-table-column>
        <el-table-column prop="description" label="产品描述" width="150">
        </el-table-column>
        
        <el-table-column prop="updateTime" label="修改时间" width="200">
        </el-table-column>
    
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="updateStatus(scope.row.status, scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="slot">
            <el-tooltip
              effect="dark"
              content="修改"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="selectUserById(slot.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
              
            >
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteUsers([slot.row.id])"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSelect.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
    name: "ProductVue",
    data(){
        return{
            selectCategory:null,
            selectName:"",
            productList:[],
            pageSelect:{
                page:1,
                pageSize:10
            },
            total:null,
            categoryList:[],
            currentPage:1,
        }
    },
    methods:{
        selectProduct(product){
            this.$http.get("/webPage/product/pageSelect",{params:{
                name: product.name,
                categoryId: product.categoryId,
                status: product.status,
                page:product.page,
                pageSize:product.pageSize
            }}).then((res)=>{
                if(res.data.code===1){
                    this.productList = res.data.data.records;
                    this.total=res.data.data.total
                }
            })
        },
         handleCurrentChange() {
      this.selectProduct({name:null,page:this.currentPage,pageSize:this.pageSelect.pageSize})
    },
    updateStatus(status,id){
        this.$http.post(`/webPage/product/status/${status}?id=${id}`)
    }
    },
    created(){
        this.selectProduct({name:null,status:null,categoryId:null,page:1,pageSize:this.pageSelect.pageSize})
        this.$http.get("/webPage/category/selectByType?type=1").then((res)=>{
            if(res.data.code===1){
                this.categoryList = res.data.data
            }
        })
    }
}
</script>

<style lang="less" scoped>
    .text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

/* 添加 breadcrumb-margin 类并设置 margin-bottom */
.breadcrumb-margin {
  margin-bottom: 20px; /* 调整此值可以控制距离 */
}

/* 父容器 card-container 设为 flex 布局，确保卡片占满剩余空间 */
.card-container {
  .card-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100vh;
    background-color: #eef1f6; /* 使用浅色背景，符合医院风格 */
  }
}

/* 卡片整体占满剩余空间 */
.full-card {
  width: calc(100% - 30px); /* 减少右端30px的间距 */
  margin-top: 10px; /* 减少与面包屑的距离 */
  margin-right: 30px; /* 设置与右端的距离 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 调整阴影为轻量风格 */
  border-radius: 6px; /* 圆角效果 */
  padding: 15px; /* 调整卡片内边距 */
  background-color: #f9f9f9; /* 更加柔和的背景色，适合医院风格 */
}


/* 表格样式美化，符合医院风格 */
.hospital-table {
  border: 1px solid #e0e0e0; /* 调整边框颜色 */
  border-radius: 6px; /* 表格边角圆滑 */
}

.hospital-table :deep(.el-table__header-wrapper) {
  background-color: #edf2fa; /* 更柔和的表头颜色 */
}

.hospital-table :deep(th) {
  text-align: center;
  background-color: #f0f4f8; /* 更柔和的表头颜色 */
  font-weight: bold;
  font-size: 14px;
  color: #3a7fda; /* 专业的蓝色 */
}

.hospital-table :deep(td) {
  padding: 12px 8px; /* 增加单元格间距 */
  text-align: center;
  font-size: 14px;
  color: #5a6b7c; /* 字体颜色微调，更加舒适 */
  border-bottom: 1px solid #ebebeb; /* 调整行间隔 */
}
.hospital-table :deep(.el-table__body tr:nth-child(odd)) {
  background-color: #f9f9f9; /* 浅色背景 */
}

.hospital-table :deep(.el-table__body tr:nth-child(even)) {
  background-color: #ffffff; /* 白色背景 */
}

.hospital-table :deep(.el-table__body tr:hover) {
  background-color: #c3e2fd !important; /* 更浅的浅蓝色背景 */
}
.hospital-table :deep(.el-table__body td:hover) {
  background-color: #7bc3f6 !important; /* 较深的浅蓝色背景 */
}
/* 解决鼠标切换行时悬浮效果不立即生效的问题 */
.hospital-table :deep(.el-table__row:hover td) {
  background-color: #c3e2fd !important; /* 确保鼠标悬停时整行生效 */
}
.hospital-table :deep(.el-table__row td:hover) {
  background-color: #7bc3f6 !important; /* 鼠标悬停在单元格上时单元格高亮 */
}

/* 操作列的按钮样式 */
.table-action-btn {
  color: #3b82f6; /* 医疗风格的蓝色 */
  font-weight: bold;
}

.header-container {
  height: 50px; /* 增加头部高度，给元素更多空间 */
  background-color: #f0f4f8; /* 更加柔和的背景色 */
  border-bottom: 1px solid #dcdfe6; /* 下边框，增加分隔感 */
  padding: 10px 15px; /* 添加内边距 */
}
.input-with-select {
  height: 40px; /* 调整输入框高度 */
  border-radius: 4px; /* 添加圆角 */
  border: 1px solid #dcdfe6; /* 边框颜色与整体风格统一 */
}

.card-row {
  height: 50px;
  display: flex;
  align-items: center;
}
/* 分页样式优化 */
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-pagination {
  background-color: #f9fafc; /* 分页区域背景 */
  padding: 10px 15px; /* 分页内边距 */
  border-radius: 6px; /* 圆角效果 */
}

.el-pagination :deep(.el-pager li) {
  font-size: 14px;
  color: #3a7fda; /* 使用专业蓝色 */
  margin: 0 5px;
}

.el-pagination :deep(.el-pager li.active) {
  background-color: #3a7fda;
  color: #fff;
}

/* 表单项悬浮效果 */
.input-with-select:hover,
.el-select:hover,
.el-input:hover,
.el-input__inner:hover {
  background-color: #e3f2fd; /* 与表格行悬浮效果一致的背景色 */
  border-color: #3a7fda; /* 改变边框颜色，突出效果 */
}

</style>